package com.ruoyix.novel.controller;

import cn.hutool.json.JSONObject;
import cn.hutool.json.JSONUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.util.ArrayList;
import java.util.List;
import java.util.Stack;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class test {
    private static final Logger logger = LoggerFactory.getLogger(test.class);
    private final List<PageSection> pageSections = new ArrayList<>();

    public static class PageSection {
        private String id;
        private List<PageSection> children;

        public PageSection(String id) {
            this.id = id;
            this.children = new ArrayList<>();
        }

        public String getId() {
            return id;
        }

        public List<PageSection> getChildren() {
            return children;
        }

        public void addChild(PageSection child) {
            children.add(child);
        }
    }

    private static class TagToken {
        String name;
        boolean isStartTag;
        int position;

        public TagToken(String name, boolean isStartTag, int position) {
            this.name = name;
            this.isStartTag = isStartTag;
            this.position = position;
        }
    }

    private void parsePageStructure(String analysisContent) {
        logger.info("解析页面结构，内容长度: {}", analysisContent.length());
        pageSections.clear();

        // 修正后的正则表达式：匹配整个SECTION块
        Pattern tagPattern = Pattern.compile(
            "<!--\\s*SECTION:\\s*([^>]+?)\\s*-->[^<]*<!--/SECTION:\\s*\\1\\s*-->",
            Pattern.DOTALL
        );

        List<TagToken> tokens = new ArrayList<>();
        Matcher tagMatcher = tagPattern.matcher(analysisContent);

        // 收集所有标签token
        while (tagMatcher.find()) {
            String name = tagMatcher.group(1).trim();
            // 将整个SECTION块视为一个开始标签
            tokens.add(new TagToken(name, true, tagMatcher.start()));
            // 添加对应的结束标签
            tokens.add(new TagToken(name, false, tagMatcher.end()));
        }

        Stack<PageSection> stack = new Stack<>();
        List<PageSection> rootSections = new ArrayList<>();

        // 处理标签token构建树结构
        for (TagToken token : tokens) {
            if (token.isStartTag) {
                PageSection section = new PageSection(token.name);
                if (stack.isEmpty()) {
                    rootSections.add(section);
                } else {
                    stack.peek().addChild(section);
                }
                stack.push(section);
            } else {
                if (!stack.isEmpty()) {
                    PageSection current = stack.pop();
                    if (!current.getId().equals(token.name)) {
                        logger.warn("标签不匹配: 开始标签 {} 结束标签 {}", current.getId(), token.name);
                        // 处理不匹配情况：尝试继续匹配
                        while (!stack.isEmpty() && !stack.peek().getId().equals(token.name)) {
                            stack.pop();
                        }
                    }
                } else {
                    logger.warn("未匹配的结束标签: {}", token.name);
                }
            }
        }

        // 处理未关闭的标签
        while (!stack.isEmpty()) {
            PageSection section = stack.pop();
            if (stack.isEmpty()) {
                rootSections.add(section);
            } else {
                stack.peek().addChild(section);
            }
        }

        pageSections.addAll(rootSections);
        logger.info("解析页面结构完成，总部分数量: {}", countSections(pageSections));

        // 打印解析出的结构
        for (PageSection section : pageSections) {
            logSectionStructure(section, 0);
        }
    }

    // 递归统计节点总数
    private int countSections(List<PageSection> sections) {
        int count = 0;
        for (PageSection section : sections) {
            count += 1 + countSections(section.getChildren());
        }
        return count;
    }

    // 打印结构树
    private void logSectionStructure(PageSection section, int level) {
        StringBuilder indent = new StringBuilder();
        for (int i = 0; i < level; i++) {
            indent.append("  ");
        }
        logger.info(indent.toString() + "SECTION: " + section.getId());
        for (PageSection child : section.getChildren()) {
            logSectionStructure(child, level + 1);
        }
    }

//


    public static void main(String[] args) {
        String aa = "{\"stage\": \"style_complete\", \"status\": \"complete\", \"message\": \"样式整合完成\", \"completeContent\": \"<!DOCTYPE html>\\n<html lang=\\\"zh-CN\\\">\\n<head>\\n  <meta charset=\\\"UTF-8\\\">\\n  <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n  <title>博客网站首页</title>\\n  <link href=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css\\\" rel=\\\"stylesheet\\\" integrity=\\\"sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT\\\" crossorigin=\\\"anonymous\\\">\\n  <script src=\\\"https://cdn.tailwindcss.com\\\"></script>\\n  <link href=\\\"https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css\\\" rel=\\\"stylesheet\\\">\\n  <script>\\ndocument.addEventListener('DOMContentLoaded', function() {\\n  // Smooth scroll for footer links\\n  const footerLinks = document.querySelectorAll('.footer-links a');\\n  footerLinks.forEach(link => {\\n    link.addEventListener('click', function(e) {\\n      e.preventDefault();\\n      const target = document.querySelector(this.getAttribute('href'));\\n      if(target) {\\n        window.scrollTo({\\n          top: target.offsetTop,\\n          behavior: 'smooth'\\n        });\\n      }\\n    });\\n  });\\n});\\ndocument.addEventListener('DOMContentLoaded', function() {\\n  const tagItems = document.querySelectorAll('.tag-item');\\n  tagItems.forEach((item, index) => {\\n    item.style.opacity = '0';\\n    item.style.transform = 'scale(0.8)';\\n    item.style.transition = `all 0.3s ease ${index * 0.05}s`;\\n    \\n    setTimeout(() => {\\n      item.style.opacity = '1';\\n      item.style.transform = 'scale(1)';\\n    }, 100);\\n  });\\n});\\ndocument.addEventListener('DOMContentLoaded', function() {\\n  const categoryItems = document.querySelectorAll('.category-item');\\n  categoryItems.forEach((item, index) => {\\n    item.style.opacity = '0';\\n    item.style.transform = 'translateX(-10px)';\\n    item.style.transition = `all 0.3s ease ${index * 0.1}s`;\\n    \\n    setTimeout(() => {\\n      item.style.opacity = '1';\\n      item.style.transform = 'translateX(0)';\\n    }, 100);\\n  });\\n});\\ndocument.addEventListener('DOMContentLoaded', function() {\\n  const postItems = document.querySelectorAll('.post-item');\\n  postItems.forEach((item, index) => {\\n    item.style.opacity = '0';\\n    item.style.transform = 'translateX(-10px)';\\n    item.style.transition = `all 0.3s ease ${index * 0.1}s`;\\n    \\n    setTimeout(() => {\\n      item.style.opacity = '1';\\n      item.style.transform = 'translateX(0)';\\n    }, 100);\\n  });\\n});\\ndocument.addEventListener('DOMContentLoaded', function() {\\n  // Add animation to author card\\n  const authorCard = document.querySelector('.author-card');\\n  if(authorCard) {\\n    authorCard.style.opacity = '0';\\n    authorCard.style.transform = 'translateY(20px)';\\n    authorCard.style.transition = 'all 0.6s ease';\\n    \\n    setTimeout(() => {\\n      authorCard.style.opacity = '1';\\n      authorCard.style.transform = 'translateY(0)';\\n    }, 100);\\n  }\\n});\\ndocument.addEventListener('DOMContentLoaded', function() {\\n  const pageLinks = document.querySelectorAll('.page-link:not(.disabled)');\\n  \\n  pageLinks.forEach(link => {\\n    link.addEventListener('click', function(e) {\\n      e.preventDefault();\\n      \\n      // Remove active class from all items\\n      document.querySelectorAll('.page-item').forEach(item => {\\n        item.classList.remove('active');\\n      });\\n      \\n      // Add active class to clicked item\\n      if(!this.classList.contains('page-link')) {\\n        this.parentElement.classList.add('active');\\n      }\\n    });\\n  });\\n});\\ndocument.addEventListener('DOMContentLoaded', function() {\\n  // Add animation to post items\\n  const postItems = document.querySelectorAll('.post-item');\\n  postItems.forEach((item, index) => {\\n    item.style.opacity = '0';\\n    item.style.transform = 'translateY(20px)';\\n    item.style.transition = `all 0.4s ease ${index * 0.1}s`;\\n    \\n    setTimeout(() => {\\n      item.style.opacity = '1';\\n      item.style.transform = 'translateY(0)';\\n    }, 100);\\n  });\\n});\\ndocument.addEventListener('DOMContentLoaded', function() {\\n  // Add hover effect to post cards\\n  const postCards = document.querySelectorAll('.post-card');\\n  postCards.forEach(card => {\\n    card.addEventListener('mouseenter', function() {\\n      this.style.transform = 'translateY(-3px)';\\n      this.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';\\n    });\\n    card.addEventListener('mouseleave', function() {\\n      this.style.transform = 'translateY(0)';\\n      this.style.boxShadow = '0 1px 3px rgba(0,0,0,0.12)';\\n    });\\n  });\\n});\\ndocument.addEventListener('DOMContentLoaded', function() {\\n  // Add animation to featured cards\\n  const cards = document.querySelectorAll('.featured-card');\\n  cards.forEach((card, index) => {\\n    card.style.opacity = '0';\\n    card.style.transform = 'translateY(20px)';\\n    card.style.transition = `all 0.4s ease ${index * 0.1}s`;\\n    \\n    setTimeout(() => {\\n      card.style.opacity = '1';\\n      card.style.transform = 'translateY(0)';\\n    }, 100);\\n  });\\n});\\ndocument.addEventListener('DOMContentLoaded', function() {\\n  // Animation for the header\\n  const header = document.querySelector('.main-header');\\n  if (header) {\\n    header.style.opacity = '0';\\n    header.style.transform = 'translateY(20px)';\\n    header.style.transition = 'all 0.6s ease-out';\\n    \\n    setTimeout(() => {\\n      header.style.opacity = '1';\\n      header.style.transform = 'translateY(0)';\\n    }, 100);\\n  }\\n});\\ndocument.addEventListener('DOMContentLoaded', function() {\\n  const navbarToggler = document.querySelector('.navbar-toggler');\\n  const navbarCollapse = document.querySelector('.navbar-collapse');\\n  \\n  navbarToggler.addEventListener('click', function() {\\n    navbarCollapse.classList.toggle('show');\\n  });\\n  \\n  // Close navbar when clicking outside on mobile\\n  document.addEventListener('click', function(e) {\\n    if (!navbarToggler.contains(e.target) && !navbarCollapse.contains(e.target)) {\\n      navbarCollapse.classList.remove('show');\\n    }\\n  });\\n});\\n    tailwind.config = {\\n      theme: {\\n        extend: {\\n          colors: {\\n          },\\n        },\\n      }\\n    }\\n  </script>\\n  <style>\\n<style>\\n/* 基础样式 */\\n:root {\\n  --primary: #3a7bd5;\\n  --primary-hover: #2c6ac4;\\n  --neutral-100: #ffffff;\\n  --neutral-200: #f8f9fa;\\n  --neutral-300: #e9ecef;\\n  --neutral-400: #adb5bd;\\n  --neutral-500: #6c757d;\\n  --neutral-600: #495057;\\n  --neutral-700: #212529;\\n  --dark-bg: #343a40;\\n}\\n\\n/* 通用过渡效果 */\\n[class*=\\\"-hover\\\"], \\na, \\nbutton, \\ninput, \\n.form-control,\\n.page-link {\\n  transition: all 0.3s ease;\\n}\\n\\n/* 卡片通用样式 */\\n.card-style {\\n  background: var(--neutral-200);\\n  border-radius: 8px;\\n  padding: 20px;\\n  margin-bottom: 25px;\\n}\\n.popular-posts,\\n.about-author,\\n.categories-list,\\n.tags-cloud {\\n  composes: card-style;\\n}\\n\\n/* 悬停效果 */\\n.hover-effect {\\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\\n}\\n.hover-effect:hover {\\n  transform: translateY(-3px);\\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\\n}\\n\\n/* 导航栏 */\\n.header-navbar {\\n  margin-bottom: 15px;\\n}\\n.navbar {\\n  padding: 10px 0;\\n  border-bottom: 1px solid var(--neutral-300);\\n}\\n.navbar-brand img {\\n  height: 40px;\\n}\\n.nav-link {\\n  color: var(--neutral-600);\\n  font-weight: 500;\\n  padding: 8px 16px;\\n}\\n.nav-link:hover,\\n.nav-link.active {\\n  color: var(--primary);\\n}\\n\\n/* 按钮 */\\n.btn-primary {\\n  background-color: var(--primary);\\n  border-color: var(--primary);\\n}\\n.btn-primary:hover {\\n  background-color: var(--primary-hover);\\n  border-color: var(--primary-hover);\\n}\\n\\n/* 表单 */\\n.form-control {\\n  padding: 8px 16px;\\n  border-radius: 20px;\\n  border: 1px solid var(--neutral-300);\\n}\\n.form-control:focus {\\n  border-color: var(--primary);\\n  box-shadow: 0 0 0 0.25rem rgba(58, 123, 213, 0.25);\\n}\\n\\n/* 文章列表 */\\n.posts-list {\\n  margin-bottom: 35px;\\n}\\n.post-item {\\n  margin-bottom: 24px;\\n  composes: hover-effect;\\n}\\n.read-more:hover {\\n  color: var(--primary-hover) !important;\\n}\\n\\n/* 主标题区 */\\n.main-header {\\n  background-color: var(--neutral-200);\\n  padding: 60px 0;\\n  margin-bottom: 30px;\\n}\\n.main-header h1 {\\n  font: 700 40px/1.2 'Inter', sans-serif;\\n}\\n.main-header p {\\n  font: 400 20px/1.5 'Inter', sans-serif;\\n  max-width: 600px;\\n  margin: 0 auto;\\n}\\n\\n/* 特色内容区 */\\n.featured-posts {\\n  padding: 40px 0;\\n  margin-bottom: 40px;\\n}\\n.section-title {\\n  font: 600 32px/1.25 'Inter', sans-serif;\\n  margin-bottom: 12px;\\n}\\n.section-subtitle {\\n  font: 400 16px/1.5 'Inter', sans-serif;\\n}\\n.featured-card {\\n  composes: hover-effect;\\n  height: 100%;\\n}\\n\\n/* 分类目录 */\\n.category-item a {\\n  box-shadow: 0 1px 3px rgba(0,0,0,0.05);\\n}\\n.category-item a:hover {\\n  background-color: rgba(58, 123, 213, 0.1) !important;\\n  color: var(--primary) !important;\\n  transform: translateX(5px);\\n}\\n.category-item a:hover .badge {\\n  background-color: var(--primary) !important;\\n  color: var(--neutral-100) !important;\\n}\\n\\n/* 页脚 */\\n.footer-section {\\n  background-color: var(--dark-bg);\\n  color: var(--neutral-100);\\n  padding: 60px 0 0;\\n}\\n.footer-title {\\n  position: relative;\\n  padding-bottom: 10px;\\n}\\n.footer-title:after {\\n  content: '';\\n  position: absolute;\\n  left: 0;\\n  bottom: 0;\\n  width: 40px;\\n  height: 2px;\\n  background-color: var(--primary);\\n}\\n.footer-links a:hover,\\n.footer-social a:hover {\\n  color: var(--primary) !important;\\n}\\n\\n/* 分页 */\\n.pagination-nav {\\n  margin-top: 30px;\\n}\\n.page-link {\\n  padding: 8px 16px;\\n  margin: 0 4px;\\n  border-radius: 8px;\\n  border: 1px solid var(--neutral-300);\\n}\\n.page-link:hover {\\n  color: var(--primary) !important;\\n  background-color: var(--neutral-200);\\n}\\n.page-item.active .page-link:hover {\\n  background-color: var(--primary) !important;\\n  color: var(--neutral-100) !important;\\n}\\n\\n/* 标签云 */\\n.tag-item:hover {\\n  background-color: var(--primary) !important;\\n  color: var(--neutral-100) !important;\\n  transform: translateY(-2px);\\n}\\n\\n/* 响应式调整 */\\n@media (max-width: 768px) {\\n  .main-header {\\n    padding: 40px 0;\\n  }\\n  .featured-posts {\\n    padding: 30px 0;\\n  }\\n}\\n</style>\\n</style>\\n</head>\\n<body class=\\\"bg-gray-50\\\">\\n  <div class=\\\"container mx-auto px-4 py-6\\\">\\n<!-- 顶部导航栏 -->\\n<div class=\\\"row header-navbar\\\">\\n  <div class=\\\"col-12 navbar-content\\\">\\n    <!-- SECTION: 顶部导航栏-->\\n<div class=\\\"header-navbar\\\">\\n  <nav class=\\\"navbar navbar-expand-lg bg-white shadow-sm\\\">\\n    <div class=\\\"container\\\">\\n      <a class=\\\"navbar-brand\\\" href=\\\"#\\\">\\n        <img src=\\\"http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png\\\" alt=\\\"Logo\\\" height=\\\"40\\\">\\n      </a>\\n      <button class=\\\"navbar-toggler\\\" type=\\\"button\\\" data-bs-toggle=\\\"collapse\\\" data-bs-target=\\\"#navbarNav\\\">\\n        <span class=\\\"navbar-toggler-icon\\\"></span>\\n      </button>\\n      <div class=\\\"collapse navbar-collapse\\\" id=\\\"navbarNav\\\">\\n        <ul class=\\\"navbar-nav me-auto\\\">\\n          <li class=\\\"nav-item\\\">\\n            <a class=\\\"nav-link active\\\" href=\\\"#\\\">Home</a>\\n          </li>\\n          <li class=\\\"nav-item\\\">\\n            <a class=\\\"nav-link\\\" href=\\\"#\\\">Blog</a>\\n          </li>\\n          <li class=\\\"nav-item\\\">\\n            <a class=\\\"nav-link\\\" href=\\\"#\\\">Categories</a>\\n          </li>\\n          <li class=\\\"nav-item\\\">\\n            <a class=\\\"nav-link\\\" href=\\\"#\\\">About</a>\\n          </li>\\n          <li class=\\\"nav-item\\\">\\n            <a class=\\\"nav-link\\\" href=\\\"#\\\">Contact</a>\\n          </li>\\n        </ul>\\n        <div class=\\\"d-flex\\\">\\n          <form class=\\\"d-flex me-2\\\">\\n            <input class=\\\"form-control rounded-pill\\\" type=\\\"search\\\" placeholder=\\\"Search...\\\">\\n          </form>\\n          <a href=\\\"#\\\" class=\\\"btn btn-primary rounded-pill px-4\\\">Subscribe</a>\\n        </div>\\n      </div>\\n    </div>\\n  </nav>\\n</div>\\n<!--/SECTION: 顶部导航栏-->\\n  </div>\\n</div>\\n\\n<!-- 主标题区 -->\\n<div class=\\\"row main-header\\\">\\n  <div class=\\\"col-12 header-content\\\">\\n    <!-- SECTION: 主标题区-->\\n<div class=\\\"main-header\\\">\\n  <div class=\\\"container py-5 text-center\\\">\\n    <div class=\\\"row justify-content-center\\\">\\n      <div class=\\\"col-lg-8\\\">\\n        <h1 class=\\\"display-4 fw-bold mb-4\\\" style=\\\"color: #212529;\\\">Welcome to Our Blog</h1>\\n        <p class=\\\"lead mb-4\\\" style=\\\"color: #6c757d;\\\">Discover the latest articles, tutorials and resources for developers and designers</p>\\n        <div class=\\\"d-flex justify-content-center gap-3\\\">\\n          <a href=\\\"#\\\" class=\\\"btn btn-primary px-4 py-2 rounded-pill\\\" style=\\\"background-color: #3a7bd5; border-color: #3a7bd5;\\\">Get Started</a>\\n          <a href=\\\"#\\\" class=\\\"btn btn-outline-primary px-4 py-2 rounded-pill\\\" style=\\\"color: #3a7bd5; border-color: #3a7bd5;\\\">Learn More</a>\\n        </div>\\n      </div>\\n    </div>\\n  </div>\\n</div>\\n<!--/SECTION: 主标题区-->\\n  </div>\\n</div>\\n\\n<!-- 特色内容区 -->\\n<div class=\\\"row featured-posts\\\">\\n  <div class=\\\"col-12 featured-content\\\">\\n    <!-- SECTION: 特色内容区-->\\n<div class=\\\"featured-posts\\\">\\n  <div class=\\\"container\\\">\\n    <div class=\\\"section-header text-center mb-5\\\">\\n      <h2 class=\\\"section-title\\\" style=\\\"color: #212529; font-size: 32px; font-weight: 700;\\\">Featured Posts</h2>\\n      <p class=\\\"section-subtitle\\\" style=\\\"color: #6c757d; font-size: 16px;\\\">Discover our most popular articles</p>\\n    </div>\\n    \\n    <div class=\\\"row g-4\\\">\\n      <div class=\\\"col-md-4\\\">\\n        <div class=\\\"featured-card\\\" style=\\\"background: #ffffff; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: hidden;\\\">\\n          <div class=\\\"card-image\\\">\\n            <img src=\\\"http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png\\\" alt=\\\"Featured Post\\\" class=\\\"img-fluid\\\" style=\\\"height: 200px; width: 100%; object-fit: cover;\\\">\\n          </div>\\n          <div class=\\\"card-body p-4\\\">\\n            <div class=\\\"post-meta mb-2\\\" style=\\\"color: #adb5bd; font-size: 14px;\\\">May 15, 2023</div>\\n            <h3 class=\\\"post-title\\\" style=\\\"color: #212529; font-size: 20px; font-weight: 600; margin-bottom: 12px;\\\">Getting Started with React Hooks</h3>\\n            <p class=\\\"post-excerpt\\\" style=\\\"color: #6c757d; font-size: 16px; margin-bottom: 16px;\\\">Learn how to use React Hooks to simplify your functional components.</p>\\n            <a href=\\\"#\\\" class=\\\"read-more\\\" style=\\\"color: #3a7bd5; font-weight: 500; text-decoration: none;\\\">Read More →</a>\\n          </div>\\n        </div>\\n      </div>\\n      \\n      <div class=\\\"col-md-4\\\">\\n        <div class=\\\"featured-card\\\" style=\\\"background: #ffffff; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: hidden;\\\">\\n          <div class=\\\"card-image\\\">\\n            <img src=\\\"http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png\\\" alt=\\\"Featured Post\\\" class=\\\"img-fluid\\\" style=\\\"height: 200px; width: 100%; object-fit: cover;\\\">\\n          </div>\\n          <div class=\\\"card-body p-4\\\">\\n            <div class=\\\"post-meta mb-2\\\" style=\\\"color: #adb5bd; font-size: 14px;\\\">June 2, 2023</div>\\n            <h3 class=\\\"post-title\\\" style=\\\"color: #212529; font-size: 20px; font-weight: 600; margin-bottom: 12px;\\\">CSS Grid Layout Mastery</h3>\\n            <p class=\\\"post-excerpt\\\" style=\\\"color: #6c757d; font-size: 16px; margin-bottom: 16px;\\\">Master the CSS Grid layout system to create complex responsive layouts.</p>\\n            <a href=\\\"#\\\" class=\\\"read-more\\\" style=\\\"color: #3a7bd5; font-weight: 500; text-decoration: none;\\\">Read More →</a>\\n          </div>\\n        </div>\\n      </div>\\n      \\n      <div class=\\\"col-md-4\\\">\\n        <div class=\\\"featured-card\\\" style=\\\"background: #ffffff; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: hidden;\\\">\\n          <div class=\\\"card-image\\\">\\n            <img src=\\\"http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png\\\" alt=\\\"Featured Post\\\" class=\\\"img-fluid\\\" style=\\\"height: 200px; width: 100%; object-fit: cover;\\\">\\n          </div>\\n          <div class=\\\"card-body p-4\\\">\\n            <div class=\\\"post-meta mb-2\\\" style=\\\"color: #adb5bd; font-size: 14px;\\\">June 10, 2023</div>\\n            <h3 class=\\\"post-title\\\" style=\\\"color: #212529; font-size: 20px; font-weight: 600; margin-bottom: 12px;\\\">JavaScript Performance Tips</h3>\\n            <p class=\\\"post-excerpt\\\" style=\\\"color: #6c757d; font-size: 16px; margin-bottom: 16px;\\\">Optimize your JavaScript code for better performance and faster execution.</p>\\n            <a href=\\\"#\\\" class=\\\"read-more\\\" style=\\\"color: #3a7bd5; font-weight: 500; text-decoration: none;\\\">Read More →</a>\\n          </div>\\n        </div>\\n      </div>\\n    </div>\\n  </div>\\n</div>\\n<!--/SECTION: 特色内容区-->\\n  </div>\\n</div>\\n\\n<!-- 主内容区与侧边栏 -->\\n<div class=\\\"row main-content-area\\\">\\n\\n  <!-- 主文章区 -->\\n  <div class=\\\"col-12 col-lg-8 posts-container\\\">\\n\\n    <!-- 最新文章区 -->\\n    <div class=\\\"row latest-posts\\\">\\n      <div class=\\\"col-12 posts-header\\\">\\n        <!-- SECTION: 最新文章区-->\\n<div class=\\\"latest-posts\\\">\\n  <div class=\\\"container\\\">\\n    <div class=\\\"section-header d-flex justify-content-between align-items-center mb-4 pb-2\\\" style=\\\"border-bottom: 2px solid #dee2e6;\\\">\\n      <h2 class=\\\"section-title\\\" style=\\\"color: #212529; font-size: 24px; font-weight: 600;\\\">Latest Articles</h2>\\n      <a href=\\\"#\\\" class=\\\"view-all\\\" style=\\\"color: #3a7bd5; font-weight: 500; text-decoration: none;\\\">View All →</a>\\n    </div>\\n\\n    <div class=\\\"row g-4\\\">\\n      <div class=\\\"col-md-6 col-lg-4\\\">\\n        <div class=\\\"post-card\\\" style=\\\"background: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); overflow: hidden; height: 100%;\\\">\\n          <div class=\\\"post-image\\\">\\n            <img src=\\\"http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png\\\" alt=\\\"Post\\\" class=\\\"img-fluid\\\" style=\\\"height: 180px; width: 100%; object-fit: cover;\\\">\\n          </div>\\n          <div class=\\\"post-body p-3\\\">\\n            <div class=\\\"post-meta d-flex align-items-center mb-2\\\" style=\\\"color: #adb5bd; font-size: 12px;\\\">\\n              <span class=\\\"me-3\\\">June 15, 2023</span>\\n              <span>5 min read</span>\\n            </div>\\n            <h3 class=\\\"post-title\\\" style=\\\"color: #212529; font-size: 18px; font-weight: 600; margin-bottom: 8px;\\\">Modern JavaScript Features You Should Know</h3>\\n            <p class=\\\"post-excerpt\\\" style=\\\"color: #6c757d; font-size: 14px; margin-bottom: 12px;\\\">Explore the latest JavaScript features that can make your code cleaner and more efficient.</p>\\n            <div class=\\\"post-footer d-flex justify-content-between align-items-center\\\">\\n              <a href=\\\"#\\\" class=\\\"read-more\\\" style=\\\"color: #3a7bd5; font-weight: 500; font-size: 14px; text-decoration: none;\\\">Read More</a>\\n              <div class=\\\"post-category\\\" style=\\\"color: #6c757d; font-size: 12px;\\\">JavaScript</div>\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n\\n      <div class=\\\"col-md-6 col-lg-4\\\">\\n        <div class=\\\"post-card\\\" style=\\\"background: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); overflow: hidden; height: 100%;\\\">\\n          <div class=\\\"post-image\\\">\\n            <img src=\\\"http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png\\\" alt=\\\"Post\\\" class=\\\"img-fluid\\\" style=\\\"height: 180px; width: 100%; object-fit: cover;\\\">\\n          </div>\\n          <div class=\\\"post-body p-3\\\">\\n            <div class=\\\"post-meta d-flex align-items-center mb-2\\\" style=\\\"color: #adb5bd; font-size: 12px;\\\">\\n              <span class=\\\"me-3\\\">June 12, 2023</span>\\n              <span>7 min read</span>\\n            </div>\\n            <h3 class=\\\"post-title\\\" style=\\\"color: #212529; font-size: 18px; font-weight: 600; margin-bottom: 8px;\\\">CSS Architecture for Large Projects</h3>\\n            <p class=\\\"post-excerpt\\\" style=\\\"color: #6c757d; font-size: 14px; margin-bottom: 12px;\\\">Learn how to structure your CSS for maintainability in large-scale applications.</p>\\n            <div class=\\\"post-footer d-flex justify-content-between align-items-center\\\">\\n              <a href=\\\"#\\\" class=\\\"read-more\\\" style=\\\"color: #3a7bd5; font-weight: 500; font-size: 14px; text-decoration: none;\\\">Read More</a>\\n              <div class=\\\"post-category\\\" style=\\\"color: #6c757d; font-size: 12px;\\\">CSS</div>\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n\\n      <div class=\\\"col-md-6 col-lg-4\\\">\\n        <div class=\\\"post-card\\\" style=\\\"background: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); overflow: hidden; height: 100%;\\\">\\n          <div class=\\\"post-image\\\">\\n            <img src=\\\"http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png\\\" alt=\\\"Post\\\" class=\\\"img-fluid\\\" style=\\\"height: 180px; width: 100%; object-fit: cover;\\\">\\n          </div>\\n          <div class=\\\"post-body p-3\\\">\\n            <div class=\\\"post-meta d-flex align-items-center mb-2\\\" style=\\\"color: #adb5bd; font-size: 12px;\\\">\\n              <span class=\\\"me-3\\\">June 8, 2023</span>\\n              <span>10 min read</span>\\n            </div>\\n            <h3 class=\\\"post-title\\\" style=\\\"color: #212529; font-size: 18px; font-weight: 600; margin-bottom: 8px;\\\">Building Accessible Web Applications</h3>\\n            <p class=\\\"post-excerpt\\\" style=\\\"color: #6c757d; font-size: 14px; margin-bottom: 12px;\\\">Essential techniques to make your web applications accessible to all users.</p>\\n            <div class=\\\"post-footer d-flex justify-content-between align-items-center\\\">\\n              <a href=\\\"#\\\" class=\\\"read-more\\\" style=\\\"color: #3a7bd5; font-weight: 500; font-size: 14px; text-decoration: none;\\\">Read More</a>\\n              <div class=\\\"post-category\\\" style=\\\"color: #6c757d; font-size: 12px;\\\">Accessibility</div>\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n    </div>\\n  </div>\\n</div>\\n<!--/SECTION: 最新文章区-->\\n      </div>\\n    </div>\\n\\n    <!-- 文章列表 -->\\n    <div class=\\\"row posts-list\\\">\\n      <div class=\\\"col-12 list-content\\\">\\n        <!-- SECTION: 文章列表-->\\n<div class=\\\"posts-list\\\">\\n  <div class=\\\"container\\\">\\n    <div class=\\\"row g-4\\\">\\n      <div class=\\\"col-12\\\">\\n        <div class=\\\"post-item d-flex flex-column flex-md-row gap-4 p-4\\\" style=\\\"background: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.12);\\\">\\n          <div class=\\\"post-thumbnail\\\" style=\\\"flex: 0 0 300px;\\\">\\n            <img src=\\\"http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png\\\" alt=\\\"Post\\\" class=\\\"img-fluid rounded\\\" style=\\\"height: 200px; width: 100%; object-fit: cover;\\\">\\n          </div>\\n          <div class=\\\"post-content flex-grow-1\\\">\\n            <div class=\\\"post-meta d-flex align-items-center mb-2\\\" style=\\\"color: #adb5bd; font-size: 14px;\\\">\\n              <span class=\\\"me-3\\\">June 20, 2023</span>\\n              <span class=\\\"me-3\\\">8 min read</span>\\n              <span class=\\\"badge rounded-pill\\\" style=\\\"background-color: #f8f9fa; color: #3a7bd5;\\\">Technology</span>\\n            </div>\\n            <h3 class=\\\"post-title mb-2\\\" style=\\\"color: #212529; font-size: 20px; font-weight: 600;\\\">The Future of Web Development in 2023</h3>\\n            <p class=\\\"post-excerpt mb-3\\\" style=\\\"color: #6c757d; font-size: 16px;\\\">Explore the emerging trends and technologies that will shape web development in the coming year.</p>\\n            <div class=\\\"post-footer d-flex justify-content-between align-items-center\\\">\\n              <a href=\\\"#\\\" class=\\\"read-more\\\" style=\\\"color: #3a7bd5; font-weight: 500; text-decoration: none;\\\">Continue Reading →</a>\\n              <div class=\\\"post-stats d-flex gap-3\\\">\\n                <span style=\\\"color: #6c757d; font-size: 14px;\\\"><i class=\\\"fas fa-eye me-1\\\"></i> 1.2K</span>\\n                <span style=\\\"color: #6c757d; font-size: 14px;\\\"><i class=\\\"fas fa-comment me-1\\\"></i> 24</span>\\n              </div>\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n\\n      <div class=\\\"col-12\\\">\\n        <div class=\\\"post-item d-flex flex-column flex-md-row gap-4 p-4\\\" style=\\\"background: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.12);\\\">\\n          <div class=\\\"post-thumbnail\\\" style=\\\"flex: 0 0 300px;\\\">\\n            <img src=\\\"http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png\\\" alt=\\\"Post\\\" class=\\\"img-fluid rounded\\\" style=\\\"height: 200px; width: 100%; object-fit: cover;\\\">\\n          </div>\\n          <div class=\\\"post-content flex-grow-1\\\">\\n            <div class=\\\"post-meta d-flex align-items-center mb-2\\\" style=\\\"color: #adb5bd; font-size: 14px;\\\">\\n              <span class=\\\"me-3\\\">June 18, 2023</span>\\n              <span class=\\\"me-3\\\">6 min read</span>\\n              <span class=\\\"badge rounded-pill\\\" style=\\\"background-color: #f8f9fa; color: #3a7bd5;\\\">Design</span>\\n            </div>\\n            <h3 class=\\\"post-title mb-2\\\" style=\\\"color: #212529; font-size: 20px; font-weight: 600;\\\">UI/UX Design Principles for Developers</h3>\\n            <p class=\\\"post-excerpt mb-3\\\" style=\\\"color: #6c757d; font-size: 16px;\\\">Essential design principles every developer should know to create better user experiences.</p>\\n            <div class=\\\"post-footer d-flex justify-content-between align-items-center\\\">\\n              <a href=\\\"#\\\" class=\\\"read-more\\\" style=\\\"color: #3a7bd5; font-weight: 500; text-decoration: none;\\\">Continue Reading →</a>\\n              <div class=\\\"post-stats d-flex gap-3\\\">\\n                <span style=\\\"color: #6c757d; font-size: 14px;\\\"><i class=\\\"fas fa-eye me-1\\\"></i> 980</span>\\n                <span style=\\\"color: #6c757d; font-size: 14px;\\\"><i class=\\\"fas fa-comment me-1\\\"></i> 15</span>\\n              </div>\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n\\n      <div class=\\\"col-12\\\">\\n        <div class=\\\"post-item d-flex flex-column flex-md-row gap-4 p-4\\\" style=\\\"background: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.12);\\\">\\n          <div class=\\\"post-thumbnail\\\" style=\\\"flex: 0 0 300px;\\\">\\n            <img src=\\\"http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png\\\" alt=\\\"Post\\\" class=\\\"img-fluid rounded\\\" style=\\\"height: 200px; width: 100%; object-fit: cover;\\\">\\n          </div>\\n          <div class=\\\"post-content flex-grow-1\\\">\\n            <div class=\\\"post-meta d-flex align-items-center mb-2\\\" style=\\\"color: #adb5bd; font-size: 14px;\\\">\\n              <span class=\\\"me-3\\\">June 15, 2023</span>\\n              <span class=\\\"me-3\\\">10 min read</span>\\n              <span class=\\\"badge rounded-pill\\\" style=\\\"background-color: #f8f9fa; color: #3a7bd5;\\\">Performance</span>\\n            </div>\\n            <h3 class=\\\"post-title mb-2\\\" style=\\\"color: #212529; font-size: 20px; font-weight: 600;\\\">Optimizing React Applications for Speed</h3>\\n            <p class=\\\"post-excerpt mb-3\\\" style=\\\"color: #6c757d; font-size: 16px;\\\">Practical techniques to improve the performance of your React applications.</p>\\n            <div class=\\\"post-footer d-flex justify-content-between align-items-center\\\">\\n              <a href=\\\"#\\\" class=\\\"read-more\\\" style=\\\"color: #3a7bd5; font-weight: 500; text-decoration: none;\\\">Continue Reading →</a>\\n              <div class=\\\"post-stats d-flex gap-3\\\">\\n                <span style=\\\"color: #6c757d; font-size: 14px;\\\"><i class=\\\"fas fa-eye me-1\\\"></i> 1.5K</span>\\n                <span style=\\\"color: #6c757d; font-size: 14px;\\\"><i class=\\\"fas fa-comment me-1\\\"></i> 32</span>\\n              </div>\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n    </div>\\n  </div>\\n</div>\\n<!--/SECTION: 文章列表-->\\n      </div>\\n    </div>\\n\\n    <!-- 分页导航 -->\\n    <div class=\\\"row pagination-nav\\\">\\n      <div class=\\\"col-12 pagination-content\\\">\\n        <!-- SECTION: 分页导航-->\\n<div class=\\\"pagination-nav\\\">\\n  <nav aria-label=\\\"Page navigation\\\">\\n    <ul class=\\\"pagination justify-content-center\\\">\\n      <li class=\\\"page-item disabled\\\">\\n        <a class=\\\"page-link\\\" href=\\\"#\\\" tabindex=\\\"-1\\\" aria-disabled=\\\"true\\\" style=\\\"color: #6c757d;\\\">\\n          <i class=\\\"fas fa-angle-left\\\"></i>\\n        </a>\\n      </li>\\n      <li class=\\\"page-item active\\\">\\n        <a class=\\\"page-link\\\" href=\\\"#\\\" style=\\\"background-color: #3a7bd5; border-color: #3a7bd5; color: #ffffff;\\\">1</a>\\n      </li>\\n      <li class=\\\"page-item\\\">\\n        <a class=\\\"page-link\\\" href=\\\"#\\\" style=\\\"color: #495057;\\\">2</a>\\n      </li>\\n      <li class=\\\"page-item\\\">\\n        <a class=\\\"page-link\\\" href=\\\"#\\\" style=\\\"color: #495057;\\\">3</a>\\n      </li>\\n      <li class=\\\"page-item\\\">\\n        <span class=\\\"page-link\\\" style=\\\"color: #6c757d;\\\">...</span>\\n      </li>\\n      <li class=\\\"page-item\\\">\\n        <a class=\\\"page-link\\\" href=\\\"#\\\" style=\\\"color: #495057;\\\">8</a>\\n      </li>\\n      <li class=\\\"page-item\\\">\\n        <a class=\\\"page-link\\\" href=\\\"#\\\" style=\\\"color: #495057;\\\">\\n          <i class=\\\"fas fa-angle-right\\\"></i>\\n        </a>\\n      </li>\\n    </ul>\\n  </nav>\\n</div>\\n<!--/SECTION: 分页导航-->\\n      </div>\\n    </div>\\n\\n  </div>\\n\\n  <!-- 侧边栏 -->\\n  <div class=\\\"col-12 col-lg-4 sidebar-widgets\\\">\\n\\n    <!-- 关于作者 -->\\n    <div class=\\\"row about-author\\\">\\n      <div class=\\\"col-12 author-content\\\">\\n        <!-- SECTION: 关于作者-->\\n<div class=\\\"about-author\\\">\\n  <div class=\\\"author-card p-4\\\" style=\\\"background: #ffffff; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);\\\">\\n    <div class=\\\"author-header d-flex align-items-center mb-4\\\">\\n      <div class=\\\"author-avatar me-3\\\">\\n        <img src=\\\"http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png\\\" alt=\\\"Author\\\" class=\\\"rounded-circle\\\" style=\\\"width: 80px; height: 80px; object-fit: cover;\\\">\\n      </div>\\n      <div class=\\\"author-info\\\">\\n        <h3 class=\\\"author-name mb-1\\\" style=\\\"color: #212529; font-size: 20px; font-weight: 600;\\\">John Doe</h3>\\n        <p class=\\\"author-title mb-0\\\" style=\\\"color: #6c757d; font-size: 14px;\\\">Frontend Developer & Blogger</p>\\n      </div>\\n    </div>\\n    <div class=\\\"author-bio mb-4\\\" style=\\\"color: #495057; font-size: 15px; line-height: 1.6;\\\">\\n      Passionate about web development and design. Sharing knowledge through articles and tutorials to help others learn and grow in the tech industry.\\n    </div>\\n    <div class=\\\"author-social d-flex justify-content-center gap-3\\\">\\n      <a href=\\\"#\\\" class=\\\"social-icon\\\" style=\\\"color: #3a7bd5; font-size: 18px;\\\"><i class=\\\"fab fa-twitter\\\"></i></a>\\n      <a href=\\\"#\\\" class=\\\"social-icon\\\" style=\\\"color: #3a7bd5; font-size: 18px;\\\"><i class=\\\"fab fa-github\\\"></i></a>\\n      <a href=\\\"#\\\" class=\\\"social-icon\\\" style=\\\"color: #3a7bd5; font-size: 18px;\\\"><i class=\\\"fab fa-linkedin\\\"></i></a>\\n      <a href=\\\"#\\\" class=\\\"social-icon\\\" style=\\\"color: #3a7bd5; font-size: 18px;\\\"><i class=\\\"fab fa-instagram\\\"></i></a>\\n    </div>\\n  </div>\\n</div>\\n<!--/SECTION: 关于作者-->\\n      </div>\\n    </div>\\n\\n    <!-- 热门文章 -->\\n    <div class=\\\"row popular-posts\\\">\\n      <div class=\\\"col-12 popular-content\\\">\\n        <!-- SECTION: 热门文章-->\\n<div class=\\\"popular-posts\\\">\\n  <div class=\\\"widget-header mb-3\\\">\\n    <h3 class=\\\"widget-title\\\" style=\\\"color: #212529; font-size: 20px; font-weight: 600; margin-bottom: 16px;\\\">Popular Posts</h3>\\n  </div>\\n  <div class=\\\"popular-posts-list\\\">\\n    <div class=\\\"post-item d-flex mb-3\\\">\\n      <div class=\\\"post-thumbnail me-3\\\" style=\\\"flex: 0 0 80px;\\\">\\n        <img src=\\\"http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png\\\" alt=\\\"Post\\\" class=\\\"rounded\\\" style=\\\"width: 80px; height: 60px; object-fit: cover;\\\">\\n      </div>\\n      <div class=\\\"post-content\\\">\\n        <h4 class=\\\"post-title mb-1\\\" style=\\\"color: #495057; font-size: 15px; font-weight: 500;\\\">React Performance Optimization Tips</h4>\\n        <div class=\\\"post-meta\\\" style=\\\"color: #adb5bd; font-size: 12px;\\\">June 10, 2023</div>\\n      </div>\\n    </div>\\n    <div class=\\\"post-item d-flex mb-3\\\">\\n      <div class=\\\"post-thumbnail me-3\\\" style=\\\"flex: 0 0 80px;\\\">\\n        <img src=\\\"http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png\\\" alt=\\\"Post\\\" class=\\\"rounded\\\" style=\\\"width: 80px; height: 60px; object-fit: cover;\\\">\\n      </div>\\n      <div class=\\\"post-content\\\">\\n        <h4 class=\\\"post-title mb-1\\\" style=\\\"color: #495057; font-size: 15px; font-weight: 500;\\\">CSS Grid Layout Tutorial</h4>\\n        <div class=\\\"post-meta\\\" style=\\\"color: #adb5bd; font-size: 12px;\\\">May 28, 2023</div>\\n      </div>\\n    </div>\\n    <div class=\\\"post-item d-flex mb-3\\\">\\n      <div class=\\\"post-thumbnail me-3\\\" style=\\\"flex: 0 0 80px;\\\">\\n        <img src=\\\"http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png\\\" alt=\\\"Post\\\" class=\\\"rounded\\\" style=\\\"width: 80px; height: 60px; object-fit: cover;\\\">\\n      </div>\\n      <div class=\\\"post-content\\\">\\n        <h4 class=\\\"post-title mb-1\\\" style=\\\"color: #495057; font-size: 15px; font-weight: 500;\\\">JavaScript ES2023 Features</h4>\\n        <div class=\\\"post-meta\\\" style=\\\"color: #adb5bd; font-size: 12px;\\\">May 15, 2023</div>\\n      </div>\\n    </div>\\n    <div class=\\\"post-item d-flex\\\">\\n      <div class=\\\"post-thumbnail me-3\\\" style=\\\"flex: 0 0 80px;\\\">\\n        <img src=\\\"http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png\\\" alt=\\\"Post\\\" class=\\\"rounded\\\" style=\\\"width: 80px; height: 60px; object-fit: cover;\\\">\\n      </div>\\n      <div class=\\\"post-content\\\">\\n        <h4 class=\\\"post-title mb-1\\\" style=\\\"color: #495057; font-size: 15px; font-weight: 500;\\\">Web Accessibility Best Practices</h4>\\n        <div class=\\\"post-meta\\\" style=\\\"color: #adb5bd; font-size: 12px;\\\">April 30, 2023</div>\\n      </div>\\n    </div>\\n  </div>\\n</div>\\n<!--/SECTION: 热门文章-->\\n      </div>\\n    </div>\\n\\n    <!-- 分类目录 -->\\n    <div class=\\\"row categories-list\\\">\\n      <div class=\\\"col-12 categories-content\\\">\\n        <!-- SECTION: 分类目录-->\\n<div class=\\\"categories-list\\\">\\n  <div class=\\\"widget-header mb-3\\\">\\n    <h3 class=\\\"widget-title\\\" style=\\\"color: #212529; font-size: 20px; font-weight: 600;\\\">Categories</h3>\\n  </div>\\n  <ul class=\\\"category-list list-unstyled\\\">\\n    <li class=\\\"category-item mb-2\\\">\\n      <a href=\\\"#\\\" class=\\\"d-flex justify-content-between align-items-center p-2 rounded\\\" style=\\\"color: #495057; background-color: #ffffff; text-decoration: none;\\\">\\n        <span>Technology</span>\\n        <span class=\\\"badge rounded-pill\\\" style=\\\"background-color: #f8f9fa; color: #3a7bd5;\\\">24</span>\\n      </a>\\n    </li>\\n    <li class=\\\"category-item mb-2\\\">\\n      <a href=\\\"#\\\" class=\\\"d-flex justify-content-between align-items-center p-2 rounded\\\" style=\\\"color: #495057; background-color: #ffffff; text-decoration: none;\\\">\\n        <span>Design</span>\\n        <span class=\\\"badge rounded-pill\\\" style=\\\"background-color: #f8f9fa; color: #3a7bd5;\\\">18</span>\\n      </a>\\n    </li>\\n    <li class=\\\"category-item mb-2\\\">\\n      <a href=\\\"#\\\" class=\\\"d-flex justify-content-between align-items-center p-2 rounded\\\" style=\\\"color: #495057; background-color: #ffffff; text-decoration: none;\\\">\\n        <span>Development</span>\\n        <span class=\\\"badge rounded-pill\\\" style=\\\"background-color: #f8f9fa; color: #3a7bd5;\\\">32</span>\\n      </a>\\n    </li>\\n    <li class=\\\"category-item mb-2\\\">\\n      <a href=\\\"#\\\" class=\\\"d-flex justify-content-between align-items-center p-2 rounded\\\" style=\\\"color: #495057; background-color: #ffffff; text-decoration: none;\\\">\\n        <span>Business</span>\\n        <span class=\\\"badge rounded-pill\\\" style=\\\"background-color: #f8f9fa; color: #3a7bd5;\\\">12</span>\\n      </a>\\n    </li>\\n    <li class=\\\"category-item\\\">\\n      <a href=\\\"#\\\" class=\\\"d-flex justify-content-between align-items-center p-2 rounded\\\" style=\\\"color: #495057; background-color: #ffffff; text-decoration: none;\\\">\\n        <span>Lifestyle</span>\\n        <span class=\\\"badge rounded-pill\\\" style=\\\"background-color: #f8f9fa; color: #3a7bd5;\\\">8</span>\\n      </a>\\n    </li>\\n  </ul>\\n</div>\\n<!--/SECTION: 分类目录-->\\n      </div>\\n    </div>\\n\\n    <!-- 标签云 -->\\n    <div class=\\\"row tags-cloud\\\">\\n      <div class=\\\"col-12 tags-content\\\">\\n        <!-- SECTION: 标签云-->\\n<div class=\\\"tags-cloud\\\">\\n  <div class=\\\"widget-header mb-3\\\">\\n    <h3 class=\\\"widget-title\\\" style=\\\"color: #212529; font-size: 20px; font-weight: 600;\\\">Tags Cloud</h3>\\n  </div>\\n  <div class=\\\"tags-container d-flex flex-wrap gap-2\\\">\\n    <a href=\\\"#\\\" class=\\\"tag-item px-3 py-1 rounded-pill\\\" style=\\\"background-color: #e9ecef; color: #495057; font-size: 14px; text-decoration: none;\\\">JavaScript</a>\\n    <a href=\\\"#\\\" class=\\\"tag-item px-3 py-1 rounded-pill\\\" style=\\\"background-color: #e9ecef; color: #495057; font-size: 16px; text-decoration: none;\\\">React</a>\\n    <a href=\\\"#\\\" class=\\\"tag-item px-3 py-1 rounded-pill\\\" style=\\\"background-color: #e9ecef; color: #495057; font-size: 12px; text-decoration: none;\\\">CSS</a>\\n    <a href=\\\"#\\\" class=\\\"tag-item px-3 py-1 rounded-pill\\\" style=\\\"background-color: #e9ecef; color: #495057; font-size: 18px; text-decoration: none;\\\">HTML</a>\\n    <a href=\\\"#\\\" class=\\\"tag-item px-3 py-1 rounded-pill\\\" style=\\\"background-color: #e9ecef; color: #495057; font-size: 14px; text-decoration: none;\\\">Vue</a>\\n    <a href=\\\"#\\\" class=\\\"tag-item px-3 py-1 rounded-pill\\\" style=\\\"background-color: #e9ecef; color: #495057; font-size: 15px; text-decoration: none;\\\">Node.js</a>\\n    <a href=\\\"#\\\" class=\\\"tag-item px-3 py-1 rounded-pill\\\" style=\\\"background-color: #e9ecef; color: #495057; font-size: 13px; text-decoration: none;\\\">Webpack</a>\\n    <a href=\\\"#\\\" class=\\\"tag-item px-3 py-1 rounded-pill\\\" style=\\\"background-color: #e9ecef; color: #495057; font-size: 16px; text-decoration: none;\\\">TypeScript</a>\\n    <a href=\\\"#\\\" class=\\\"tag-item px-3 py-1 rounded-pill\\\" style=\\\"background-color: #e9ecef; color: #495057; font-size: 14px; text-decoration: none;\\\">Git</a>\\n  </div>\\n</div>\\n<!--/SECTION: 标签云-->\\n      </div>\\n    </div>\\n\\n  </div>\\n</div>\\n\\n<!-- 页脚区 -->\\n<div class=\\\"row footer-section\\\">\\n  <div class=\\\"col-12 footer-content\\\">\\n    <!-- SECTION: 页脚区-->\\n<div class=\\\"footer-section\\\">\\n  <div class=\\\"container py-5\\\">\\n    <div class=\\\"row\\\">\\n      <div class=\\\"col-md-4 mb-4 mb-md-0\\\">\\n        <div class=\\\"footer-logo mb-3\\\">\\n          <img src=\\\"http://10.18.85.21:9000/blog/2024/05/31/9c55b9623cb54790bafdccf83fcdcea0.png\\\" alt=\\\"Logo\\\" style=\\\"height: 40px;\\\">\\n        </div>\\n        <p class=\\\"footer-about\\\" style=\\\"color: #adb5bd; font-size: 14px; line-height: 1.6;\\\">\\n          A modern blog sharing insights on web development, design and technology trends.\\n        </p>\\n      </div>\\n      <div class=\\\"col-md-2 mb-4 mb-md-0\\\">\\n        <h4 class=\\\"footer-title mb-3\\\" style=\\\"color: #ffffff; font-size: 16px; font-weight: 600;\\\">Quick Links</h4>\\n        <ul class=\\\"footer-links list-unstyled\\\">\\n          <li class=\\\"mb-2\\\"><a href=\\\"#\\\" style=\\\"color: #adb5bd; font-size: 14px; text-decoration: none;\\\">Home</a></li>\\n          <li class=\\\"mb-2\\\"><a href=\\\"#\\\" style=\\\"color: #adb5bd; font-size: 14px; text-decoration: none;\\\">Blog</a></li>\\n          <li class=\\\"mb-2\\\"><a href=\\\"#\\\" style=\\\"color: #adb5bd; font-size: 14px; text-decoration: none;\\\">About</a></li>\\n          <li><a href=\\\"#\\\" style=\\\"color: #adb5bd; font-size: 14px; text-decoration: none;\\\">Contact</a></li>\\n        </ul>\\n      </div>\\n      <div class=\\\"col-md-3 mb-4 mb-md-0\\\">\\n        <h4 class=\\\"footer-title mb-3\\\" style=\\\"color: #ffffff; font-size: 16px; font-weight: 600;\\\">Categories</h4>\\n        <ul class=\\\"footer-links list-unstyled\\\">\\n          <li class=\\\"mb-2\\\"><a href=\\\"#\\\" style=\\\"color: #adb5bd; font-size: 14px; text-decoration: none;\\\">Technology</a></li>\\n          <li class=\\\"mb-2\\\"><a href=\\\"#\\\" style=\\\"color: #adb5bd; font-size: 14px; text-decoration: none;\\\">Design</a></li>\\n          <li class=\\\"mb-2\\\"><a href=\\\"#\\\" style=\\\"color: #adb5bd; font-size: 14px; text-decoration: none;\\\">Development</a></li>\\n          <li><a href=\\\"#\\\" style=\\\"color: #adb5bd; font-size: 14px; text-decoration: none;\\\">Tutorials</a></li>\\n        </ul>\\n      </div>\\n      <div class=\\\"col-md-3\\\">\\n        <h4 class=\\\"footer-title mb-3\\\" style=\\\"color: #ffffff; font-size: 16px; font-weight: 600;\\\">Subscribe</h4>\\n        <p class=\\\"footer-subscribe-text mb-3\\\" style=\\\"color: #adb5bd; font-size: 14px;\\\">\\n          Get the latest posts delivered right to your inbox\\n        </p>\\n        <form class=\\\"footer-subscribe-form\\\">\\n          <div class=\\\"input-group mb-3\\\">\\n            <input type=\\\"email\\\" class=\\\"form-control\\\" placeholder=\\\"Your email\\\" style=\\\"background: #495057; border: none; color: #ffffff; font-size: 14px;\\\">\\n            <button class=\\\"btn btn-primary\\\" type=\\\"submit\\\" style=\\\"background-color: #3a7bd5; border: none; font-size: 14px;\\\">Subscribe</button>\\n          </div>\\n        </form>\\n        <div class=\\\"footer-social d-flex gap-3 mt-3\\\">\\n          <a href=\\\"#\\\" style=\\\"color: #adb5bd; font-size: 16px;\\\"><i class=\\\"fab fa-twitter\\\"></i></a>\\n          <a href=\\\"#\\\" style=\\\"color: #adb5bd; font-size: 16px;\\\"><i class=\\\"fab fa-facebook\\\"></i></a>\\n          <a href=\\\"#\\\" style=\\\"color: #adb5bd; font-size: 16px;\\\"><i class=\\\"fab fa-instagram\\\"></i></a>\\n          <a href=\\\"#\\\" style=\\\"color: #adb5bd; font-size: 16px;\\\"><i class=\\\"fab fa-github\\\"></i></a>\\n        </div>\\n      </div>\\n    </div>\\n    <div class=\\\"footer-bottom mt-5 pt-4 border-top\\\" style=\\\"border-color: #495057 !important;\\\">\\n      <div class=\\\"row align-items-center\\\">\\n        <div class=\\\"col-md-6\\\">\\n          <p class=\\\"mb-0\\\" style=\\\"color: #6c757d; font-size: 13px;\\\">© 2023 MyBlog. All rights reserved.</p>\\n        </div>\\n        <div class=\\\"col-md-6 text-md-end\\\">\\n          <a href=\\\"#\\\" class=\\\"me-3\\\" style=\\\"color: #6c757d; font-size: 13px; text-decoration: none;\\\">Privacy Policy</a>\\n          <a href=\\\"#\\\" style=\\\"color: #6c757d; font-size: 13px; text-decoration: none;\\\">Terms of Service</a>\\n        </div>\\n      </div>\\n    </div>\\n  </div>\\n</div>\\n<!--/SECTION: 页脚区-->\\n  </div>\\n</div>\\n\\n<!-- CSS样式定义 -->\\n  </div>\\n\\n\\n<script>\\n  // 页面加载完成后执行\\n  document.addEventListener('DOMContentLoaded', function() {\\n    console.log('页面加载完成');\\n\\n    // 添加滚动动画\\n    const animateOnScroll = () => {\\n      const elements = document.querySelectorAll('.animate-on-scroll');\\n      elements.forEach(element => {\\n        const elementTop = element.getBoundingClientRect().top;\\n        const elementVisible = 150;\\n        if (elementTop < window.innerHeight - elementVisible) {\\n          element.classList.add('fade-in');\\n        }\\n      });\\n    };\\n\\n    window.addEventListener('scroll', animateOnScroll);\\n    animateOnScroll(); // 初始检查\\n  });\\n\\n</script>\\n</body>\\n</html>\"}";
        JSONObject entries = JSONUtil.parseObj(aa);
        Object completeContent = entries.get("completeContent");
        System.out.println(completeContent);

    }
}
